In this tutorial, we will discuss, how to get HTML code from rich text in Python Django.

We will develop an application using Django where we will use a rich text editor as CKEditor. And when a user types any rich text in the editor, we will get the corresponding HTML code.

You can see below the image:

Table of Contents

Here we will develop the application using python Django.

Here are the steps we need to follow to build this application.

To develop the Django application, first, we need to create and activate a virtual environment.

To create a virtual environment, first of all, create a folder or directory (if not exists before). Then open the terminal or command prompt and run the below command which will create a virtual environment name “text-env”.

Once the virtual environment got created, run the below command to activate the virtual environment (virtualenv).

Next, we need to install Django and CKEditor in our virtual environment and we will do that using the pip command.

In the next step, we need to install the CKEditor text editor. For that, we will install the Django-CKEditor module in our virtual environment by following the command mentioned below.

Setup a Django Project in Python

We have installed Django and CKEditor, in the next steps, we will see how to set up our Django project.

Creating a Project

To create a Django Project in Python, run the following command.

Using this command, we have created a Django project named Texttohtml. This will create default files and a directory in the project files.

Moving to the project directory

To work within our project, we need to move to the project directory using the following command.

Creating an App

We will create a Django app named HtmlEditor within our project directory using the below command.

Now, we have successfully created our Django application HtmlEditor. Within this app, you will see the directories generated by default after the execution of the above command.

Recommendation: Difference between app and project in Django

Open the Django Project in the VS Code

Start Visual Studio Code > Under Get Started click on the Open Folder option > Select the Texttohtml directory.

Register the app and CKEditor in settings.py

We need to register our application HtmlEditor and CKEditor in the installed app section of the settings.py file. Follow the code mentioned below to register the app and CKEditor.

Creating models in the app

Now, we will create models in the models.py file in the HtmlEditor app. To create models go through the below code.

Create forms in the HtmlEditor application.

After creating models we need to create forms for our HtmlEditor app. For that follow the code mentioned below in forms.py file.

Creating views in the HtmlEditor application

Now, in this step, we will create views in our app. For that, go to the views.py file and follow the code mentioned below.

We are going to create a template name home.html in our HtmlEditor app. To create a template go to the HtmlEditor app and create a new folder named templates again create a folder named HtmlEditor within templates and create a home.html file in the HtmlEditor app.

HtmlEditor>templates>HtmlEditor>home.html

Now, to create a home page where we will render our app, We have used bootstrap to make our app more dynamic. Follow the below code in the home.html file.

HTML code

Read: How to use Quill Editor in Django?

In this step, we will use the Javascript function named get_html_code to get HTML code from the rich text. For that follow the mentioned code below tag in home.html file.

Creating URLs

Now, we will create a URL path for all the views in the urls.py file of our project HTML text.

We are done with all the necessary configurations of our application and now we are ready to run our app on the server where we can view the app. To run the development server we will use the runserver command.

Now the URL link  http://127.0.0.1:8000/ page will redirect you to the server where we will see our application.

Also, check: How to use Summernote editor in Django?

In this Python Django tutorial, we have learned how to create an app to get HTML code from rich text in Python Django with help of forms and model fields.

We have also learned how to integrate and use CKEditor in our application. Along with that we also learned about SMTP server settings to generate a token. Now You can simply use this app to get HTML code from rich text.

Python is one of the most popular languages in the United States of America. I have been working with Python for a long time and I have expertise in working with various libraries on Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… I have experience in working with various clients in countries like United States, Canada, United Kingdom, Australia, New Zealand, etc. Check out my profile.